<template>
	<view>
		<mescroll-uni class="lisBox" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption" :bottombar="false">
			<view class="pB15  ">
				<jobItem :list="list"></jobItem>

			</view>
		</mescroll-uni>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import jobItem from "@/components/job/jobCard/index.vue"
	import {
		getCompanyLis,
		getPerSonLis
	} from "@/api/userInterface/job.js"
	export default {
		components: {
			jobItem
		},
		mixins: [MescrollMixin],
		data() {
			return {
				downOption: {
					use: true,
					auto: false
				},
				query: {
					oddJobName: '',
					pageSize: 10,
					pageNo: 1

				},
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					empty: {
						use: true,
						icon: '/static/image/nodata.png',
						tip: "暂无数据",
						fixed: true
					},
					textNoMore: "到底啦~",
				},
				list: [],
				id:'',
				isPerson:''
			};
		},
		onShow(e) {
			this.mescroll && this.mescroll.triggerDownScroll()
		},
		onLoad(e) {
			this.id=e.id,
			this.isPerson=e.isPerson
		},
		methods: {

			async upCallback(page) {
				if (page.num == 1) this.list = [];
				let pageNo = page.num;
				const {
					lat,
					lon
				} = await this.xf.getLatOrLon();
				if (this.isPerson == 1) {
					getCompanyLis({
						pageSize: 10,
						pageNo: pageNo,
						comId: this.id,
						longitude: lon,
						latitude: lat
					}).then(res => {
						let list = res.result.records;
						this.list = this.list.concat(list);
						this.mescroll.endSuccess(list.length);
					}).catch(err => {
						this.mescroll.endByPage(0, 0);
						this.mescroll.endSuccess(1);
						this.mescroll.endErr();
					})

				} else {
					getPerSonLis({
						pageSize: 10,
						pageNo: pageNo,
						xfOddUserId: this.id,
						longitude: lon,
						latitude: lat
					}).then(res => {
						let list = res.result.records;
						this.list = this.list.concat(list);
						this.mescroll.endSuccess(list.length);
					}).catch(err => {
						this.mescroll.endByPage(0, 0);
						this.mescroll.endSuccess(1);
						this.mescroll.endErr();
					})
				}
			},
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;

		background: linear-gradient(0deg, #F7F8FB, #E1EEFF);
	}
</style>
<style scoped lang="scss">
	.jobCard {
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.jobName {
			// max-width:200rpx;
		}

		.jobLeft {
			width: 70%;
		}

		.jobStatus {
			border: 2rpx solid #FF0000;
			border-radius: 10rpx;
			height: 34rpx;
			line-height: 34rpx;
			padding: 0 10rpx;
			margin-right: 10rpx;
		}

		.jobTag {
			height: 34rpx;
			line-height: 34rpx;
			padding: 0 10rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
		}

		.jobMoney {
			word-break: keep-all;
		}

		.jobTime {
			color: #8D8D8D;
			font-size: 26rpx;
			margin-right: 10rpx;
			height: 44rpx;
			line-height: 44rpx;
			padding: 0 20rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin-top: 16rpx;
		}

		.posImg {
			width: 32rpx;
			height: 32rpx;
		}

		.posTxt {
			width: calc(100% - 42rpx);
			font-weight: 400;
			font-size: 26rpx;
			color: #8D8D8D;
		}

		.companyImg {
			width: 48rpx;
			height: 48rpx;
		}

		.rzImg {
			width: 24rpx;
			height: 24rpx;
		}

		.companyName {
			font-weight: 500;
			font-size: 30rpx;
			color: #333;
			margin-right: 10rpx;
			margin-left: 10rpx;
		}
	}
</style>